<template>
  <div class="switch-card">
    <div
      :id="id"
      :class="{ 'inner-card-left': currentChoose == 1, 'inner-card-right': currentChoose == 0 }"
    >
      <div class="card-header">
        <div
          v-for="(item, index) in props.tabList"
          :key="index"
          :class="{ 'tab-pane': true, 'tab-active': checked === index }"
          @click="switchTab(item, index)"
        >
          {{ item.text }}
        </div>
      </div>
      <div class="card-content">
        <slot name="card1" v-if="currentChoose === 0"></slot>
        <slot name="card2" v-if="currentChoose === 1"></slot>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
const props = defineProps({
  id: {
    type: String,
    default: ''
  },
  tabList: {
    type: Array,
    default: () => []
  },
  currentChoose: {
    type: Number,
    default: 0
  }
})
const emit = defineEmits(['switchTab'])
const checked = ref(0)
const switchTab = (item, index) => {
  checked.value = index
  emit('switchTab', item, index)
}
watch(
  () => props.currentChoose,
  val => {
    checked.value = val
  }
)
</script>
<style scoped lang="scss">
@mixin common-card {
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
@mixin common-card-header {
  flex: 0.5;
  cursor: pointer;
  text-align: center;
  font-family: PingFangSC-Semibold;
  font-size: 18px;
  color: #7b87a2;
  letter-spacing: 0;
  justify-content: center;
  font-weight: 600;
  line-height: 34px;
  display: flex;
  align-items: center;
  border-bottom: 2px solid #c5bfbf;
}
.decoration-line {
  position: absolute;
  width: 100%;
  height: 2px;
  background: #008bfe;
  margin-bottom: 2px;
}

.switch-card {
  position: relative;
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.15) 0%,
    rgba(255, 255, 255, 0.4) 100%
  );
  box-shadow: 0px 2px 10px 0px rgba(10, 75, 129, 0.06);
  border-radius: 0px 0px 8px 8px;
  @include common-card;
  // background-image: url(../../assets/images/cardComp/card-bottom.png);

  .card-header {
    display: flex;
    height: 36px;
    width: 100%;
    .tab-pane {
      @include common-card-header;
      opacity: 0.5;
      font-family: PingFangSC-Regular;
      color: #0a4b81;
      letter-spacing: 0;
      line-height: 22px;
      font-weight: 400;
    }
    .tab-active {
      opacity: 1;
      font-family: PingFangSC-Regular;
      font-size: 18px;
      color: #0a4b81;
      letter-spacing: 0;
      line-height: 22px;
      font-weight: 400;
      border-bottom: 2px solid blue;
    }
  }
  .card-content {
    height: calc(100% - 34px);
    width: 100%;
    box-sizing: border-box;
  }
}
</style>
